<template>
	<div class="sjbig">
		<div class="header">
			<span class="spansz">0086</span>
			<div class="one">
				 <el-select v-model="value" placeholder="请选择" >
				    <el-option 
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</div>
		</div>
		<div class="sj_dl">
			<span>登录名（手机号）</span>
			<input  v-model="username" placeholder="请输入手机号码"/>
			<span>设置密码</span>
			<input type="text"  ref="input"   placeholder="6~16位数字或字母,区分大小写" />
			<span class="yc" @click="gaibian" >隐藏</span>
		</div>
		<div class="deft">
			<el-button type="warning" @click="intouser" :disabled="false">注册</el-button>
		</div>
		<div class="fx">
			<el-checkbox v-model="checked" @click="change">已阅读并同意</el-checkbox>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Shouji",
		 data() {
		      return {
		        options: [{
		          value: '1',
		          label: '中国大陆'
		        }, {
		          value: '2',
		          label: '香港地区'
		        }, {
		          value: '4',
		          label: '台湾地区'
		        },
				 {
				  value: '5',
				  label: '澳门地区'
				},
				 {
				  value: '6',
				  label: '日本'
				},
				{
				  value: '7',
				  label: '韩国'
				},
				{
				  value: '8',
				  label: '新加坡'
				}],
		        value: '',
				checked: false,
				use1:{},
				username:'',
				password:'',
				flag: false,
				
				
			 }	
		},
		updated() {
			this.use1.username=this.username;
			this.use1.password=this.password;
			this.use1.id=this.options.value;
		},

		methods: {
			change(){
				if(this.checked=true){
					this.flag=true
				}
			},
			gaibian(){
				if(this.$refs.input.type = "text"){
					this.$refs.input.type = "password"
			
				} 
			},
			intouser(){
				this.$http.post('/api/users/shouji',this.use1).then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data, config);
                    if (data.code == 200) {
                        this.$message.success('注册成功');
                        this.$router.push('/medal/weibo')
                    } else {
                       this.$message.error('注册失败')
                        
                    }
                })
			}	
		}    
	}
</script>

<style lang="less" scoped>
	.sjbig{
		background-color: whitesmoke;
	}
	.header{
		margin-top: 16px;
		display: flex;
		line-height: 96px;
	}
	.header span{
		width: 10%;
		font-size: 24px;
		/* line-height: 1.2rem; */
		text-align: center;
		
	}
	.spansz{
		margin-top: 24px;
		height: 40px;
		line-height: 40px;
		border: 4px solid ;
	}
	.one{
		width: 90%;	
	}
	.el-input__inner{
		width: 100%;
		position: relative;
		flex: 1;
		height: 64px;
	}
	.el-select{
		width: 100%;
	}
	.el-select input{
		text-align: center;
	}
	.sj_dl input{
		display: block;
		width: 100%;
		height: 64px;
		line-height: 64px;
		margin: 16px 0;
	}
	.sj_dl {
		position: relative;
	}
	.yc{
		position: absolute;
		right: 1%;
		top: 75%;
		background-color: whitesmoke;
		width: 80px;
		height:48px;
		line-height:48px;
		text-align: center;
	}
	.deft button{
		margin-top: 5%;
		width: 90%;
		margin-left: 5%;
		height: 64px;
	}
	.fx{
		margin-left: 40px;
		line-height: 80px;
		height: 80px;
	}
	.fx span{
		font-size: 32px;
		width: 32px;
		height: 32px;
	}
	
</style>
